<!--
 * @Description: 
 * @Date: 2023-11-14 10:36:30
 * @LastEditTime: 2023-12-23 19:34:50
-->
<template>
	<div class="partyBuilding" id="partyBuilding">
		<div class="partyBuilding-title">{{ route.query.name }}</div>
		<div class="partyBuilding-content">
			<div class="partyBuilding-content-message">
				<div class="message-left">
					<bigPhotoSphere
						:url="CzDzbData.qjturl"
						:id="route.query.id"
						:style="{ width: `${100 * scales}%`, height: `${100 * scales}%` }"
					></bigPhotoSphere>
					<div>
						<!-- <img src="../../assets/partyBuilding/video.png" /> -->
						<img @click="handleMp3" src="../../assets/partyBuilding/map3.png" />
					</div>
				</div>
				<div class="message-right">
					<div class="module-title">
						<img src="../../assets/images/star.png" />
						<span>{{ route.query.name }}简介</span>
					</div>
					<div v-html="CzDzbData.czjj" style="color: #fff6d1 !import"></div>
				</div>
			</div>
			<div class="partyBuilding-content-statistics">
				<div>
					<div class="module-title">
						<img src="../../assets/images/star.png" />
						<span>党支部简介</span>
					</div>
					<div class="avater-list">
						<div v-for="item in CzDzbData.dzbjj" :key="item.id">
							<div class="avater-list-item">
								<img :src="item?.leaderPic ? item.leaderPic : getImageUrl('touxiang.png')" @error="errorImg($event)" />
								<span>{{ item.leader }}</span>
								<span>{{ item.zhiwu }}</span>
							</div>
						</div>
					</div>
				</div>
				<div>
					<div class="module-title">
						<img src="../../assets/images/star.png" />
						<span>党支部数据</span>
					</div>
					<div class="data-list">
						<div>
							<div class="data-list-item">
								<span>{{ CzDzbData?.dzbsj?.djppnum }}</span>
								<span>党组织数量</span>
							</div>
						</div>
						<div>
							<div class="data-list-item">
								<span>{{ CzDzbData?.dzbsj?.dzznum }}</span>
								<span>经济体数量</span>
							</div>
						</div>
						<div>
							<div class="data-list-item">
								<span>{{ CzDzbData?.dzbsj?.jjtnum }}</span>
								<span>党建品牌数</span>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="partyBuilding-bottom">
			<div class="partyBuilding-bottom-item" @click="router.push('/home')">
				<img src="../../assets/partyBuilding/bottom1.png" />
				<span>返回首页</span>
			</div>
			<div class="partyBuilding-bottom-item" @click="handleGrid">
				<img src="../../assets/partyBuilding/bottom2.png" />
				<span>流动党员</span>
			</div>
			<div class="partyBuilding-bottom-item" @click="handelSkip">
				<img src="../../assets/partyBuilding/bottom3.png" />
				<span>全景展示</span>
			</div>
		</div>
		<audio ref="audioRef"></audio>
	</div>
</template>

<script setup>
import { useRouter, useRoute } from 'vue-router';
import uDialogModal from '../../components/listDialog/listDialog.js';
import { onMounted, reactive, ref, nextTick, onUnmounted } from 'vue';
import { getCzDzbData } from './service';
import bigPhotoSphere from '../../components/bigPhotoSphere/index.vue';
import autofit from 'autofit.js';
import { message } from 'ant-design-vue';
import { getImageUrl } from '../../utils/base.ts';

let audioRef = ref(null);
const scales = ref(1);
const router = useRouter();
const route = useRoute();
const uDialog = ref(null);
const CzDzbData = reactive({
	czjj: null,
	dzbjj: [],
	dzbsj: null,
	qjturl: null
});
onMounted(() => {
	nextTick(() => {
		autofit.init(
			{
				dh: 1080,
				dw: 1920,
				el: '#partyBuilding',
				ignore: ['#big-viewerRef'],
				resize: true
			},
			false
		);
		getScale();
		window.addEventListener('resize', getScale);
	});
	getCzDzbData({ id: route.query.id }).then(res => {
		Object.assign(CzDzbData, res);
		audioRef.value.src = CzDzbData?.yinpinurl;
	});
});
onUnmounted(() => {
	window.removeEventListener('resize', getScale);
});
function handleGrid() {
	setTimeout(() => {
		uDialog.value = uDialogModal({ id: route.query.id })
			.then(() => {
				console.log('成功逻辑');
			})
			.catch(err => {
				console.log('失败逻辑');
			});
	}, 0);
}

function handelSkip() {
	router.push({ path: '/photoSphere', query: { id: route.query.id } });
}
function handleMp3() {
	let src = audioRef.value.getAttribute('src');
	console.log(src);
	if (src !== 'null') {
		if (audioRef.value.paused) {
			audioRef.value.play(); // 这个就是播放
		} else {
			audioRef.value.pause(); // 这个就是暂停
		}
	} else {
		message.error('暂无音频');
	}
}

function errorImg(event) {
	let img = event.srcElement;
	img.src = getImageUrl('touxiang.png');
	img.onerror = null; //解绑onerror事件
}

function getScale() {
	let el = document.getElementById('partyBuilding');
	let st = window.getComputedStyle(el, null);
	let tr =
		st.getPropertyValue('-webkit-transform') ||
		st.getPropertyValue('-moz-transform') ||
		st.getPropertyValue('-ms-transform') ||
		st.getPropertyValue('-o-transform') ||
		st.getPropertyValue('transform') ||
		'FAIL';

	// With rotate(30deg)...
	// matrix(0.866025, 0.5, -0.5, 0.866025, 0px, 0px)
	console.log('Matrix: ' + tr);

	// rotation matrix - http://en.wikipedia.org/wiki/Rotation_matrix

	let values = tr.split('(')[1].split(')')[0].split(',');
	let a = values[0];
	let b = values[1];
	let c = values[2];
	let d = values[3];

	let scale = Math.sqrt(a * a + b * b);
	scales.value = scale;
	console.log('Scale: ' + scale);
}
</script>

<style lang="scss" scoped>
.partyBuilding {
	width: 100%;
	height: 100%;
	background: #60151a;
	border: 1px solid rgb(255 147 38 / 35%);
	display: flex;
	flex-direction: column;
	&-title {
		width: 100%;
		height: 50px;
		line-height: 50px;
		text-align: center;
		color: #d5c7a6;
		font-size: 20px;
		background-image: url('../../assets/dTitle.png');
		background-size: 100% 100%;
	}
	&-content {
		flex: 1;
		padding: 20px;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		box-sizing: border-box;
		&-message {
			display: flex;
			height: 65%;
			margin-bottom: 20px;
			.message-left {
				flex: 0.7;
				height: 100%;

				background: rgba(134, 75, 30, 0.3);
				border-radius: 30px 0px 30px 0px;
				position: relative;
				overflow: hidden;
				& > img:nth-child(1) {
					width: 100%;
					height: 100%;
					border-radius: 30px 0px 30px 0px;
				}

				& > div:nth-child(2) {
					position: absolute;
					top: 30px;
					left: 25px;
					& > img:nth-child(1),
					& > img:nth-child(2) {
						width: 40px;
						height: 40px;
						margin: 0 5px;
					}
				}
			}
			.message-right {
				flex: 0.3;
				height: 100%;
				margin-left: 20px;
				color: #fff;
				overflow: auto;
				& > div:nth-child(2) {
					margin-top: 30px;
					color: #e6d7b1;
					font-size: 16px;
				}
			}
			.message-right::-webkit-scrollbar {
				width: 5px;
				height: 5px;
				background-color: transparent;
			}
			.message-right::-webkit-scrollbar-thumb {
				background-color: #e6d7b1 !important;
			}
		}
		&-statistics {
			width: 100%;
			flex: 0.5;
			display: flex;
			& > div {
				flex: 1;
			}
			.avater-list {
				display: flex;
				padding: 30px;
				& > div {
					margin-right: 50px;
				}
				.avater-list-item {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;

					img {
						height: 107px;
						border-radius: 10px;
					}
					& > span {
						color: #fff;
					}
					& > span:nth-child(2) {
						margin: 10px 0;
					}
					& > span:nth-child(3) {
						width: 94px;
						font-size: 14px;
						display: inline-block;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 3; /*省略几行写几*/
						-webkit-box-orient: vertical;
					}
				}
			}
			.data-list {
				display: flex;
				padding: 60px 30px;
				& > div {
					height: 80px;
					margin-right: 50px;
					position: relative;
				}
				.data-list-item {
					margin-left: 30px;
					display: flex;
					flex-direction: column;
					align-items: center;
					& > span {
						color: #ffffff;
					}
					& > span:nth-child(1) {
						font-size: 61px;
						line-height: 61px;
					}
					& > span:nth-child(1)::after {
						content: '个';
						position: absolute;
						font-size: 14px;
						bottom: 5px;
						right: -20px;
					}
					& > span:nth-child(2) {
						font-size: 16px;
					}
				}
				& > div::before {
					content: ' ';
					width: 2px;
					height: 100%;
					background: linear-gradient(to bottom, #ffa018 0%, #ffa018 50%, #fff 50%, #fff 100%);
					position: absolute;
				}
			}
		}
	}
	&-bottom {
		position: fixed;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		display: flex;
		color: #fff6d1;
		&-item {
			width: 128px;
			height: 50px;
			background-image: url('../../assets/partyBuilding/bottom-bg.png');
			background-size: 100% 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			& > span {
				margin-left: 10px;
			}
		}
		&-item:nth-child(2) {
			margin: 0 60px;
		}
	}
}
.module-title {
	width: 100%;
	height: 43px;
	background-image: url('@/assets/images/moduleItem.png');
	background-repeat: no-repeat;
	padding: 0.1vw 1.5vw;
	font-weight: bold;
	color: #ffffff;
	text-align: center;
	white-space: nowrap;
	display: flex;
	align-items: center;
	img {
		width: 26px;
		height: 26px;
		margin-right: 8px;
	}
	span {
		font-size: 16px;
		font-weight: 400;
		color: #fff6d1;
		line-height: 104px;
	}
}
</style>
